<template>
  <div class="news-edit-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{title}}</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="新闻标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入新闻标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作者" prop="author">
              <el-input v-model="form.author" placeholder="请输入作者" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="新闻摘要" prop="summary">
              <el-input type="textarea" :autosize="{ minRows: 7, maxRows: 7}" v-model="form.summary" placeholder="请输入新闻摘要" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="新闻图片" prop="imageUrl">
              <el-upload :action="imageUploader.action" :headers="imageUploader.headers" :on-success="setFormImageUrl" list-type="picture-card" :file-list="imageUploader.fileList">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="setFormImagePreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="removeFormImageUrl(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="imageUploader.isShowPreview">
                <img width="100%" :src="imageUploader.previewUrl" alt="">
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="新闻地址" prop="url">
          <el-input v-model="form.url" placeholder="请输入新闻地址" />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否置顶" prop="isTop">
              <el-select v-model="form.isTop" placeholder="请选择是否置顶">
                <el-option
                  v-for="dict in isTopOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否轮播" prop="isCarousel">
              <el-select v-model="form.isCarousel" placeholder="请选择是否轮播">
                <el-option
                  v-for="dict in isCarouselOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="轮播顺序" prop="carouselOrder">
              <el-input v-model="form.carouselOrder" placeholder="请输入轮播顺序" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="新闻栏目" prop="newsColumn">
              <el-select v-model="form.newsColumn" placeholder="请选择新闻栏目" @change="getColumn2Options">
                <el-option
                  v-for="dict in newsColumnOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="新闻子栏目" prop="newsColumn2">
              <el-select v-model="form.newsColumn2" placeholder="请选择新闻子栏目">
                <el-option
                  v-for="dict in newsColumn2Options"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="新闻内容" prop="newContent" class="editor-content">
          <!--<el-input v-model="form.newContent" placeholder="请输入新闻内容" />-->
          <Editor v-model="form.newContent" />
        </el-form-item>
        <el-form-item class="form-btn-bar">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="reset()">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import { getNews, addNews, updateNews } from "@/api/basic/news";
  import Editor from '@/components/Editor';
  export default {
    name: "newsEdit",
    components: {
      Editor
    },
    data(){
      return {
        title:"",
        form:{},
        rules:{
          title: [
            { required: true, message: '请输入新闻标题', trigger: 'blur' }
          ],
          author:[
            { required: true, message: '请输入作者名', trigger: 'blur' }
          ],
          imageUrl:[
            { required: true, message: '请选择新闻图片', trigger: 'blur' }
          ],
          isTop:[
            { required: true, message: '请选择是否置顶', trigger: 'blur' }
          ],
          isCarousel:[
            { required: true, message: '请选择是否轮播', trigger: 'blur' }
          ],
          newsColumn:[
            { required: true, message: '请选择新闻栏目', trigger: 'blur' }
          ],
          newsColumn2:[
            { required: false, message: '请选择新闻子栏目', trigger: 'blur' }
          ]

        },
        isCarouselOptions:[],
        isTopOptions:[],
        newsColumnOptions:[],
        newsColumn2Options:[],
        imageUploader:{
          action: process.env.VUE_APP_BASE_API+"/common/upload/news",
          headers: {
            Authorization: 'Bearer ' + this.$store.state.user.token,
            lesseeId: this.$store.state.user.lesseeid
          },
          fileList:[],
          isShowPreview:false,
          previewUrl:""
        }
      }
    },
    methods:{
      setFormImageUrl(response, file, fileList){
        this.imageUploader.fileList = [file]
        this.form.imageUrl = response.url
      },
      setFormImagePreview(file){
        this.imageUploader.isShowPreview = !this.imageUploader.isShowPreview
        this.imageUploader.previewUrl = file.url
      },
      removeFormImageUrl(file){
        this.imageUploader.previewUrl = ""
        let index = this.imageUploader.fileList.findIndex(obj => obj == file)
        if(index>-1){
          this.imageUploader.fileList.splice(index,1)
        }
      },
      getColumn2Options(ColumnValue){
        this.getLsDicts(ColumnValue).then(response => {
          this.newsColumn2Options = response.data
          this.form.newsColumn2 = undefined
        })
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          title: undefined,
          summary: undefined,
          author: undefined,
          imageUrl: undefined,
          url: undefined,
          isCarousel: "0",
          carouselOrder: undefined,
          isTop: "0",
          newsColumn: undefined,
          newsColumn2: undefined,
          newContent: undefined,
          isActive: "1"
        };
        this.resetForm("form");
      },
      getNewsInfo(id) {
        this.reset()
        if(id!="new"){
          getNews(id).then(response => {
            this.form = response.data
            if(response.data.imageUrl){
              this.imageUploader.fileList = [{url:response.data.imageUrl}]
            }
            if(response.data.newsColumn){
              this.getLsDicts(response.data.newsColumn).then(res => {
                this.newsColumn2Options = res.data
              })
            }
            this.title = "修改新闻公告"
          })
        }else{
          this.title = "新增新闻公告"
        }
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateNews(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                }
              });
            } else {
              addNews(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                }
              });
            }
          }
        });
      },
    },
    created() {
      this.getNewsInfo(this.$route.params.id)
      this.getDicts("is_active").then(response => {
        this.isCarouselOptions = response.data
        this.isTopOptions = response.data
      })
      this.getLsDicts("LESSEE_NEWS_COLUMN").then(response => {
        this.newsColumnOptions = response.data
      })
    }
  }
</script>

<style>
  .editor-content .quill-editor.editor{
    height: 500px
  }
  .form-btn-bar{
    margin-top: 80px;
  }
</style>
